<template>
  <BaseView id="versionInfo">
    <template v-slot:header>
      <!-- 头部 -->
      <BaseHeader :title="$t('translate49')" :rightIcon="null" @leftClick="$router.goBack()" />
    </template>
    <!-- <div class="card">
      
    </div> -->
    <div class="title titleSecond">{{ $t("translate53") }}</div>
    <div class="card">
      <div class="fnItem padTwoItem2">
        <div class="fnWrap">
          <p class="fnName">{{ $t("translate49") }}</p>
        </div>
        <div class="fnBox" @click="handlSwitch1">
          <div :class="lwakeUp == 1 ? 'fnSlider active' : 'fnSlider'">
            <div class="sliderBtn"></div>
          </div>
        </div>
      </div>
      <BaseCell :class="['oneset', { last: list.last }]" v-for="(item, index) in list" :key="index" :left="item.left"
        :desc="item.desc" :right="item.right" :arrow="item.arrow" :switch="item.switch" :border="item.border"
        :hide="item.hide" :disable="item.disable" @click="handleCellClick(item.id)">
      </BaseCell>
    </div>

    <messageTime v-if="layerPicker" :defaultValue="lwakeupTime" @shadeHide="shadeHide" :messageTitle="$t('translate50')"
      @deleteTrue="deleteTrue1" :columns="columns1"></messageTime>
    <ComSelectPicker :state="isAutoMode" :list="autoMode" type="checkbox" :selectedNum="ltimeRe"
      :title="$t('translate51')" @chooseWeekCustom="autoModeChoose" @cancel="shadeHide">
    </ComSelectPicker>
    <ComSelectPicker :state="layerInterval" :list="autoMode1" :selectedNum="lwakeupH" :title="$t('translate52')"
      @choose="autoModeChoose1" @cancel="shadeHide">
    </ComSelectPicker>
    <!-- <messageInterval v-if="layerInterval" :defaultValue="lsnoringSens" @shadeHide="shadeHide"
      :messageTitle="$t('translate41')" @deleteTrue="deleteTrue" :columns="columns1"></messageInterval> -->
    <!-- <messageInterval v-if="layerPicker" :defaultValue="lsnoringTime - 1" @shadeHide="shadeHide"
      :messageTitle="$t('translate42')" @deleteTrue="deleteTrue1" :columns="columns2"></messageInterval> -->

    <div class="title titleSecond">{{ $t("translate54") }}</div>
    <div class="card">
      <div class="fnItem padTwoItem2">
        <div class="fnWrap">
          <p class="fnName">{{ $t("translate49") }}</p>
        </div>
        <div class="fnBox" @click="handlSwitch2">
          <div :class="rwakeUp == 1 ? 'fnSlider active' : 'fnSlider'">
            <div class="sliderBtn"></div>
          </div>
        </div>
      </div>
      <BaseCell :class="['oneset', { last: list.last }]" v-for="(item, index) in list1" :key="index" :left="item.left"
        :desc="item.desc" :right="item.right" :arrow="item.arrow" :switch="item.switch" :border="item.border"
        :hide="item.hide" :disable="item.disable" @click="handleCellClick1(item.id)">
      </BaseCell>
    </div>

    <messageTime v-if="layerPicker1" :defaultValue="rwakeupTime" @shadeHide="shadeHide" :messageTitle="$t('translate50')"
      @deleteTrue="deleteTrue2" :columns="columns1"></messageTime>
    <ComSelectPicker :state="isAutoMode1" :list="autoMode" type="checkbox" :selectedNum="rtimeRe"
      :title="$t('translate51')" @chooseWeekCustom="autoModeChoose3" @cancel="shadeHide">
    </ComSelectPicker>
    <ComSelectPicker :state="layerInterval1" :list="autoMode1" :selectedNum="rwakeupH" :title="$t('translate52')"
      @choose="autoModeChoose4" @cancel="shadeHide">
    </ComSelectPicker>

  </BaseView>
</template>

<script>
import { mapState } from "vuex";
import messageSelect from "@/components/messageSelect.vue";
import messageTime from "@/components/messageTime.vue";
import messageInterval from "@/components/messageInterval.vue";
import ComSelectPicker from "@/components/ComSelectPicker.vue";

export default {
  name: "VersionInfo",
  components: {
    messageSelect,
    messageInterval,
    messageTime,
    ComSelectPicker
  },
  data() {
    return {
      layerPicker: false,
      layerInterval: false,
      layerTime: false,
      isAutoMode: false,
      layerPicker1: false,
      layerInterval1: false,
      layerTime1: false,
      isAutoMode1: false,
      autoModeSelect: 0,
      autoMode: [
        {
          title: this.$t("Monday"),
          id: 1,
          isChoosed: false,
        },
        {
          title: this.$t("Tuesday"),
          id: 2,
          isChoosed: false,
        },
        {
          title: this.$t("Wednesday"),
          id: 3,
          isChoosed: false,
        },
        {
          title: this.$t("Thursday"),
          id: 4,
          isChoosed: false,
        },
        {
          title: this.$t("Friday"),
          id: 5,
          isChoosed: false,
        },
        {
          title: this.$t("Saturday"),
          id: 6,
          isChoosed: false,
        },
        {
          title: this.$t("Sunday"),
          id: 7,
          isChoosed: false,
        },

      ],
      autoMode1: [
        {
          title: this.$t("translate56"),
          id: 0,
          isChoosed: false,
        },
        {
          title: this.$t("translate57"),
          id: 1,
          isChoosed: false,
        },
        {
          title: this.$t("translate58"),
          id: 2,
          isChoosed: false,
        },


      ],
      lwakeupTimeText: "",
    };
  },
  computed: {
    ...mapState([
      // "sedentaryReminder",
      //   "repeatRemindTimes",
      //   "takeinReminderTime",
      //   "repeatRemindTime",
    ]),
    ...mapState({
      lwakeUp: (state) => state.wakeUp.lwakeUp,
      lwakeupTime: (state) => state.wakeUp.lwakeupTime,
      ltimeRe: (state) => state.wakeUp.ltimeRe,
      lwakeupH: (state) => state.wakeUp.lwakeupH,
      rwakeUp: (state) => state.wakeUp.rwakeUp,
      rwakeupTime: (state) => state.wakeUp.rwakeupTime,
      rtimeRe: (state) => state.wakeUp.rtimeRe,
      rwakeupH: (state) => state.wakeUp.rwakeupH,
    }),
    columns1() {
      let arr = [];
      for (let i = 0; i <= 20; i++) {
        arr.push(i);
      }
      return arr;
    },
    columns2() {
      let arr = [];
      for (let i = 1; i <= 9; i++) {
        arr.push(i +this.$t('translate60'));
      }
      for (let i = 10; i <= 50; i += 10) {
        arr.push(i + this.$t('translate60'));
      }
      for (let i = 1; i <= 8; i++) {
        arr.push(i + this.$t('translate59'));
      }
      return arr;
    },
    list() {
      return [
        {
          // 唤醒时间
          id: 0,
          left: this.$t("translate50"),
          right: (parseInt(this.lwakeupTime / 60)<10?"0"+parseInt(this.lwakeupTime / 60):parseInt(this.lwakeupTime / 60)) +":"+ (this.lwakeupTime % 60<10?"0"+this.lwakeupTime % 60:this.lwakeupTime % 60) ,
          arrow: true,
        },
        {
          // 重复
          id: 1,
          left: this.$t("translate51"),
          right: "",
          arrow: true,
        },
        {
          // 唤醒高度
          id: 2,
          left: this.$t("translate52"),
          right: this.lwakeupH == 0 ? this.$t("translate56") : this.lwakeupH == 1 ? this.$t("translate57") : this.$t("translate58"),
          arrow: true,
          border: false,
        },
      ];
    },
    list1() {
      return [
        {
          // 唤醒时间
          id: 0,
          left: this.$t("translate50"),
          right:  (parseInt(this.rwakeupTime / 60)<10?"0"+parseInt(this.rwakeupTime / 60):parseInt(this.rwakeupTime / 60)) +":"+ (this.rwakeupTime % 60<10?"0"+this.rwakeupTime % 60:this.rwakeupTime % 60) ,
          arrow: true,
        },
        {
          // 重复
          id: 1,
          left: this.$t("translate51"),
          right: "",
          arrow: true,
        },
        {
          // 唤醒高度
          id: 2,
          left: this.$t("translate52"),
          right: this.rwakeupH == 0 ? this.$t("translate56") : this.rwakeupH == 1 ? this.$t("translate57") : this.$t("translate58"),
          arrow: true,
          border: false,
        },
      ];
    },
  },
  methods: {
    getNumber(i) {

    },
    autoModeChoose(i, n) {

      console.log("n:", n)
      let str = n.join("")
      let data = {
        wakeUp: {
          ltimeRe: str
        },
      };
      this.$store.dispatch("setDevInfo", data);
      this.isAutoMode = false;
    },
    autoModeChoose1(i) {
      let data = {
        wakeUp: {
          lwakeupH: parseInt(i),
        },
      };
      this.$store.dispatch("setDevInfo", data);
      this.layerInterval = false;
    },
    autoModeChoose3(i, n) {

      console.log("n:", n)
      let str = n.join("")
      let data = {
        wakeUp: {
          rtimeRe: str
        },
      };
      this.$store.dispatch("setDevInfo", data);
      this.isAutoMode1 = false;
    },
    autoModeChoose4(i) {
      let data = {
        wakeUp: {
          rwakeupH: parseInt(i),
        },
      };
      this.$store.dispatch("setDevInfo", data);
      this.layerInterval1 = false;
    },
    handleCellClick(id) {
      console.log(id);
      switch (id) {
        case 0:
          this.layerPicker = true;
          break;
        case 1:
          //灵敏度
          this.isAutoMode = true;
          break;
        case 2:
          //止鼾时长
          this.layerInterval = true;
          break;
      }
    },
    handleCellClick1(id) {
      console.log(id);
      switch (id) {
        case 0:
          this.layerPicker1 = true;
          break;
        case 1:
          //灵敏度
          this.isAutoMode1 = true;
          break;
        case 2:
          //止鼾时长
          this.layerInterval1 = true;
          break;
      }
    },
    shadeHide() {
      this.layerPicker = false;
      this.layerInterval = false;
      this.isAutoMode = false;
      this.layerPicker1 = false;
      this.layerInterval1 = false;
      this.isAutoMode1 = false;
    },
    deleteTrue(i) {
      console.log("设置灵敏度", i);
      let data = {
        antiSnoring: {
          lsnoringSens: i,
        },
      };
      this.$store.dispatch("setDevInfo", data);
      // this.$store.commit("UPDATE_STATE", {
      //   name: "repeatRemindTimes",
      //   value: i,
      // });
      this.layerInterval = false;
    },

    deleteTrue1(i) {
      console.log("设置唤醒时间", i);
      let h = parseInt(i[0]) * 60;
      let m = parseInt(i[1])
      let data = {
        wakeUp: {
          lwakeupTime: h + m,
        },
      };
      this.$store.dispatch("setDevInfo", data);
      // this.$store.commit("UPDATE_STATE", {
      //   name: "repeatRemindTimes",
      //   value: i,
      // });
      this.layerPicker = false;
    },
    deleteTrue2(i) {
      console.log("设置唤醒时间", i);
      let h = parseInt(i[0]) * 60;
      let m = parseInt(i[1])
      let data = {
        wakeUp: {
          rwakeupTime: h + m,
        },
      };
      this.$store.dispatch("setDevInfo", data);
      // this.$store.commit("UPDATE_STATE", {
      //   name: "repeatRemindTimes",
      //   value: i,
      // });
      this.layerPicker1 = false;
    },
    deleteTrue3(i) {
      console.log("设置右灵敏度", i);
      let data = {
        antiSnoring: {
          rsnoringSens: i,
        },
      };
      this.$store.dispatch("setDevInfo", data);
      // this.$store.commit("UPDATE_STATE", {
      //   name: "repeatRemindTimes",
      //   value: i,
      // });
      this.layerInterval = false;
    },
    deleteTrue4(i) {
      console.log("设置右止鼾时长", this.columns2.indexOf(i));
      let data = {
        antiSnoring: {
          rsnoringTime: this.columns2.indexOf(i) + 1,
        },
      };
      this.$store.dispatch("setDevInfo", data);
      // this.$store.commit("UPDATE_STATE", {
      //   name: "repeatRemindTimes",
      //   value: i,
      // });
      this.layerPicker = false;
    },
    cancel() {
      this.isAutoMode = false;
    },
    handlSwitch1() {
      if (this.lwakeUp == 1) {
        console.log("关闭左唤醒");
        let data = {
          wakeUp: {
            lwakeUp: 0,
          },
        };
        this.$store.dispatch("setDevInfo", data);

      } else {
        console.log("打开左唤醒");
        let data = {
          wakeUp: {
            lwakeUp: 1,
          },
        };
        this.$store.dispatch("setDevInfo", data);

      }
    },
    handlSwitch2() {
      if (this.rwakeUp == 1) {
        console.log("关闭右唤醒");
        let data = {
          wakeUp: {
            rwakeUp: 0,
          },
        };
        this.$store.dispatch("setDevInfo", data);

      } else {
        console.log("打开右唤醒");
        let data = {
          wakeUp: {
            rwakeUp: 1,
          },
        };
        this.$store.dispatch("setDevInfo", data);

      }
    },
  },
  created() {
    window.hilink.setTitleVisible(false, "window.Ag.setTitleVisible");
    window.Ag.setTitleVisible = (res) => { };
    // 重置物理返回键
    window.goBack = () => {
      
      if (this.popupShow) {
        this.popupShow = 0;
        return;
      }
      this.$router.push("/");
    };
  },
};
</script>
<style lang="less" scoped>
@import url("../style/public.less");

#versionInfo {
  .card {
    .fnItem {
      // width: calc(100% - 2.4rem);
      height: 4.8rem;
      display: flex;
      justify-items: center;
      justify-content: space-between;
      align-items: center;
      align-items: center;
      margin: 0 auto;
      position: relative;
      margin: 0 0.4rem;
      padding: 0rem 0.8rem;

      &::after {
        content: '';
        display: block;
        height: 1px;
        position: absolute;
        bottom: 0;
        left: 0.8rem;
        right: 0.8rem;
        background-color: var(--emui_color_divider_horizontal);
        -webkit-transform: scaleY(0.25);
        transform: scaleY(0.25);
      }

      .fnWrap {
        width: 48%;

        .fnName {
          font-size: 1.6rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: var(--emui_text_primary);
        }
      }

      .fnBox {
        .fnSlider {
          position: relative;
          width: 3.6rem;
          height: 2rem;
          border-radius: 1.6rem;
          background: var(--emui_control_normal);
        }

        .dark .fnSlider {
          background: rgba(255, 255, 255, 0.1);
        }

        .fnSlider .sliderBtn {
          width: 1.6rem;
          height: 1.6rem;
          background: white;
          position: absolute;
          top: 50%;
          right: 1.8rem;
          -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
          border-radius: 1.5rem;
          box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.4);
        }

        .active {
          background: var(--xwq_color);

          .sliderBtn {
            right: 0.2rem;
          }
        }
      }
    }

    align-self: stretch;
    .cardStyle();
    //margin-top: 0.8rem;
    margin-bottom: 1.2rem;
    padding: 0.4rem 0;

    .switch {
      width: 4rem;
      height: 2rem;
      background-image: var(--ic_switch_off);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right center;

      &.on {
        background-image: var(--ic_switch_on);
      }
    }
  }
}

// 适配
.pad {
  #versionInfo {
    .content {
      margin: 0 var(--pad_column_1);
    }
  }
}


/deep/.van-overlay {
  z-index: 100 !important;
  background-color: #000;
}

/deep/.van-popup {
  z-index: 101 !important;
}
</style>